<template>
    <div class="home-content" v-if="isHomeShow">
        <!-- <div style="position:fixed;top:0px;left:0px"> -->
        <div class="h-top">
            <div style="display:flex;align-items:center;color:#062a56">
                <!-- 昆明市第一人民医院甘美医院临床药物试验申请平台 -->
                <img src="@/assets/img/logo.jpg" alt="" />
                <!-- <h2>临床药物试验申请平台</h2> -->
            </div>
            <div>
                <el-button style="cursor:pointer;" @click="loginClick" v-if="!this.$store.state.user.token" size="small">登录</el-button>
                <el-button style="cursor:pointer;" @click="goPersonal" size="small" icon="el-icon-user">个人中心</el-button>
                <!-- <span style="cursor:pointer;" @click="signOutClick()" v-else>退出登录</span> -->
                <!-- <span @click="regClick('注册')">注册</span> -->
                <!-- <span
          style="cursor:pointer;"
          class="headerBtn"
          @click="goPersonal"
        >个人中心</span> -->
            </div>
        </div>
        <!-- 导航 -->
        <div class="nav">
            <span style="cursor:pointer;" v-for="item in navList" :key="item" @click="navClick(item)">{{ item }}</span>
        </div>
        <!-- </div> -->
        <!-- 登录弹框 -->
        <el-dialog title="提示" :visible.sync="dialogVisible" width="500px" :before-close="handleClose">
            <div class="loginBox">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="ruleForm.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="ruleForm.password" type="password"></el-input>
                    </el-form-item>
                </el-form>
                <!-- <button @click="toLogClick">登录</button> -->
                <div style="text-align:center">
                    <el-button type="primary" @click="toLog()">登录</el-button>
                    <el-button type="primary" @click="toForgetPas()">忘记密码</el-button>
                </div>
                <div class="toReg" @click="toReg()">没有账号，立即注册</div>
            </div>
        </el-dialog>
        <!-- 忘记密码弹框 -->
        <el-dialog :visible.sync="isShowForget" width="40%" :before-close="handleClose">
            <div class="forgetPas">
                <el-form :model="forgetForm" ref="forgetForm" label-width="140px" class="demo-ruleForm">
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="forgetForm.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="forgetForm.password" type="password"></el-input>
                    </el-form-item>
                    <el-form-item label="重复密码" prop="respassword">
                        <el-input v-model="forgetForm.respassword" type="password"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" prop="telPhone">
                        <el-input v-model="forgetForm.telPhone"></el-input>
                    </el-form-item>
                    <el-form-item label="验证码" prop="code">
                        <el-input v-model="forgetForm.code"></el-input>
                        <span style="position: absolute;top: 8%;right: 10%;cursor:pointer;" @click="getCodeClick()">{{ code }}</span>
                    </el-form-item>
                </el-form>
                <!-- <button @click="toLogClick">登录</button> -->
                <div style="text-align:center">
                    <el-button type="primary" @click="goLogin()">去登录</el-button>
                    <el-button type="primary" @click="toSave()">保存</el-button>
                </div>
            </div>
        </el-dialog>

        <!-- 内容区域 -->
        <div class="main">
            <FrontHome v-if="flag == '首页'" @isShow="homeisShow" />
            <FrontSurvey v-if="flag == '医院概况'" />
            <FrontExpert v-if="flag == '专家介绍'" />
            <FrontSubject v-if="flag == '受试者招募'" />
            <FrontDownload v-if="flag == '下载中心'" />
            <FrontQualifications v-if="flag == '临床药物试验指南'" />
            <FrontReg v-if="flag == '注册'" @goLogin="goLogin" />
        </div>
        <Footer />
        <!-- footer -->
        <!-- <div style="position:fixed;bottom:0;left:0"> -->
        <!-- </div> -->
    </div>
</template>
<script>
import FrontHome from './Home.vue';
import FrontSurvey from '../frontSurvey/index.vue';
import FrontExpert from '../frontExpert/index.vue';
import FrontSubject from '../frontSubject/index.vue';
import FrontDownload from '../frontDownload/index.vue';
import FrontQualifications from '../frontQualifications/index.vue';
import FrontReg from '../Login/login.vue';
import Footer from '../footer/footer.vue';
import { loginAPI, getCodeAPI, getForgetPasswordAPI, getUserInfoAPI } from '@/api/user';
export default {
    components: {
        FrontHome,
        FrontExpert,
        FrontSubject,
        FrontDownload,
        FrontSurvey,
        FrontQualifications,
        FrontReg,
        Footer
    },
    data() {
        return {
            ip: '',
            token: this.$store.token,
            navList: ['首页', '医院概况', '专家介绍', '受试者招募', '下载中心', '临床药物试验指南'],
            flag: '首页',
            loginText: '登录',
            isHomeShow: true,
            dialogVisible: false,
            isShowForget: false,
            code: '',
            ruleForm: {
                username: 'ADMIN',
                password: '13'
            },

            forgetForm: {
                username: '',
                telPhone: '',
                code: '',
                password: '',
                respassword: ''
            },
            rules: {
                username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
                cardID: [{ required: true, message: '请输入身份证号', trigger: 'blur' }, { min: 18 }],
                age: [
                    { required: false, message: '请输入年龄', trigger: 'blur' },
                    { type: 'number', message: '年龄必须为数字值' }
                ],
                sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
                email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
                position: [{ required: false, message: '请输入职位名称', trigger: 'blur' }],
                company: [{ required: true, message: '请输入单位名称', trigger: 'blur' }],
                fixedTel: [{ required: false, message: '请输入固定电话', trigger: 'blur' }],
                telPhone: [{ required: true, message: '请输入手机号', trigger: 'blur' }, { type: 'number' }],
                code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                    // { min: 6,  message: '密码要多于6位', trigger: 'blur' }
                ],
                respassword: [{ required: true, message: '请再次输入密码', trigger: 'blur' }],
                checked: [{ required: true, message: '请输入活动名称', trigger: 'blur' }]
            }
        };
    },
    mounted() {
        this.ready();
        this.getCodeClick();
        window.addEventListener('scroll', this.scrollToTop); //监听滚动条
    },
    destroyed() {
        window.removeEventListener('scroll', this.scrollToTop); //移除滚动条监听
    },
    methods: {
        // getCode(n) {
        //     var all = 'azxcvbnmsdfghjklqwertyuiopZXCVBNMASDFGHJKLQWERTYUIOP0123456789';
        //     var b = '';
        //     for (var i = 0; i < n; i++) {
        //         var index = Math.floor(Math.random() * 62);
        //         b += all.charAt(index);
        //     }
        //     return b;
        // },
        // 获取ip
        ready() {
            let cip = returnCitySN['cip'];
            let cid = returnCitySN['cid'];
            let cname = returnCitySN['cname'];
            this.ip = cip;
        },
        // 监听到的滚动的距离
        scrollToTop() {
            this.scrollTop = window.scrollY || window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            // 计算距离顶部的高度，当高度大于300显示回顶部图标，小于300则隐藏
            if (this.scrollTop > 300) {
                this.topShow = true;
            } else {
                this.topShow = false;
            }
        },
        // 点击个人中心
        goPersonal() {
            if (this.$store.state.user.token) {
                // this.getInfo();
                this.$router.push('/main/dashboard');
                localStorage.removeItem('url');
            } else {
                this.$message.error('未登录');
            }
        },
        // 点击去登录
        toLog() {
            this.dialogVisible = true;
            this.isShowForget = false;
            // 手动校验
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    this.login();
                }
            });
        },
        // 获取用户信息接口
        async getInfo() {
            const res = await getUserInfoAPI({
                token: this.$store.state.user.token,
                OprID: this.$store.state.user.oprid
            });
            if (res.code == 'succ') {
                this.$message.success('登录成功');
                // this.$store.commit('user/setUserInfo', res.result[0]);
                localStorage.setItem('userInfo', JSON.stringify(res.result));
                localStorage.setItem('time', res.date);
                this.$router.push('/main/dashboard');
            } else {
                this.$message.error(res.message);
            }
        },
        async login() {
            const res = await loginAPI(
                // {username: this.ruleForm.username, password: this.ruleForm.password}
                { YHM: this.ruleForm.username, Pwd: this.ruleForm.password, IP: this.ip }
            );

            if (res.code == 'succ') {
                this.$store.commit('user/setToken', res.result[0]);
                this.$store.commit('user/setOprid', res.result[0]);
                this.$store.commit('user/setOprname', res.result[0]);
                this.getInfo();
            } else {
                this.$message.error(res.message);
                this.ruleForm = {};
            }

            // this.$store.commit('user/setToken', res.data)
            this.dialogVisible = false;
        },
        toReg() {
            this.dialogVisible = false;
            this.flag = '注册';
        },
        goLogin() {
            this.flag = '首页';
            this.dialogVisible = true;
            this.isShowForget = false;
            let timer = setInterval(() => {
                let ispeed = Math.floor(-this.scrollTop / 5);
                document.documentElement.scrollTop = document.body.scrollTop = this.scrollTop + ispeed;
                if (this.scrollTop === 0) {
                    clearInterval(timer);
                }
            }, 16);
        },
        // 点击忘记密码
        toForgetPas() {
            this.isShowForget = true;
            this.dialogVisible = false;
        },
        // 修改密码之后保存的点击事件
        async toSave() {
            const res = await getForgetPasswordAPI({
                token: this.$store.state.user.token || 'null',
                OprID: this.$store.state.user.oprid || 'null',
                pwd: this.forgetForm.password,
                NewPwd: this.forgetForm.respassword,
                Dhhm: this.forgetForm.telPhone,
                Yzm: this.forgetForm.code
            });
            if (res.code == 'succ') {
                this.$message.success('修改成功，请重新登陆');
                this.forgetForm = {};
                this.isShowForget = false;
                this.dialogVisible = true;
            } else {
                this.$message.error(res.message);
                this.forgetForm = {};
            }
        },
        homeisShow(bool) {
            return bool;
        },
        // 导航切换
        navClick(flag) {
            this.isHomeShow = this.homeisShow();
            this.$nextTick(() => {
                this.isHomeShow = true;
            });
            this.flag = flag;
        },
        // 点击关闭弹出得登录注册弹出框
        handleClose(done) {
            // this.$refs.ruleForm.validate = {};
            done();
        },
        // 点击获取验证码
        async getCodeClick() {
            const res = await getCodeAPI({
                ip: this.ip,
                SJH: this.ruleForm.telPhone || 'null'
            });
            if (res.code == 'succ') {
                // let i = 60;
                // let timer = setInterval(() => {
                //     this.codeText = '倒计时' + i + 's';
                //     i--;
                //     if (i < 0) {
                //         this.codeText = '获取验证码';
                //         clearInterval(timer);
                //     }
                // }, 1000);
                this.code = res.result;
            } else {
                this.$message.error(res.message);
            }
        },
        // 登录按钮得点击事件
        loginClick() {
            this.dialogVisible = true;
        }
    }
};
</script>

<style scoped>
.home-content {
    width: 100%;
    min-height: 100vh;
}
.h-top {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.3rem;
}
.h-top span {
    margin-left: 15px;
}
.nav {
    display: flex;
    width: 90%;
    margin: 0 auto;
    padding: 0px 10px;
    align-items: center;
}
.nav span {
    min-width: 120px;
    height: 30px;
    line-height: 30px;
    padding: 10px;
    text-align: center;
    color: #fff;
    display: block;
    background: #409eff;
    border: 1px solid #fff;
    font-size: 1.3rem;
}
.loginBox {
    padding: 10px;
    font-size: 1.3rem;
}
.username,
.password {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.toReg {
    cursor: pointer;
    margin-top: 20px;
}
.headerBtn {
    border: 1px solid #c1c1c1;
    padding: 10px;
}
::v-deep .el-form-item__label {
    font-size: 1.3rem;
}
::v-deep .el-input--small .el-input__inner {
    height: 38px;
    line-height: 38px;
    font-size: 1.3rem;
}
::v-deep .el-button--small {
    font-size: 1.3rem;
}
::v-deep .el-checkbox__label {
    font-size: 1.3rem;
}
::v-deep .el-checkbox__inner {
    width: 20px;
    height: 20px;
}
/* .main{
  font-size: 1.1rem;
} */
</style>
